<template>
  <!-- 检查记录/复查记录 --  不合格 -- 列表详情页中 -- 检查详情/复查详情 -- 查看详情 -->
  <view class="nonGooverDetails">
    <view class="wrapper">
      <view class="be-ilegal">不合格事项 </view>
      <view class="be-content">
        <scroll-view scroll-y="true" @scrolltolower="scrollBottom" :style="[
            {
              height: '100%',
            },
          ]" v-if="dataSource.length">
          <view class="becontent-item" v-for="(v, i) in dataSource" :key="i">
            <view class="case-title">
              【{{ v.industryExamineCategoryName }}】
            </view>

            <block v-for="(v2, index2) in v.policeCheckDetailInfoList" :key="index2">
              <view>
                <view class="title">
                  {{ v2.sortOrder }}.
                  {{ v2.industryExamineDetailName }}
                </view>

                <view style="
                    padding: 15rpx 20rpx;
                    background: #f8f8f8;
                    border-radius: 8rpx;
                  ">
                  <view class="basisOf">
                    <image :src="baseImgUrl + 'basis-icon.png'" mode="aspectFill"></image>
                    依据
                  </view>
                  <block v-for="(v3, index3) in v2.regulationsInfoList" :key="index3">
                    <view class="clause">《{{ v3.regulationsName }}》</view>
                    <view class="clause-item">
                      •&nbsp;{{ v3.regulationsArticleNo }}
                      <view style="white-space: pre-wrap" v-html="v3.regulationsArticleContent"></view>
                    </view>
                  </block>
                </view>
              </view>

              <view class="scene-forensics">
                <view class="forensics-title">
                  <view>现场取证：</view>
                  <view class="time">{{ v.checkTime }}</view>
                </view>
                <view class="picture" v-if="
                    v2.failedImageInfoList != null &&
                    v2.failedImageInfoList.length
                  ">
                  <image v-for="(img, imgIndex) in v2.failedImageInfoList" :key="imgIndex" :src="imgPrefix + img.path"
                    mode="aspectFill" @click="pvwImage([imgPrefix + img.path])"></image>
                </view>

                <view class="explain">
                  {{ v2.checkMemo || "" }}
                </view>
              </view>

              <view style="padding-top: 20rpx"><u-line></u-line></view>
            </block>
          </view>
        </scroll-view>
        <view v-if="!dataSource.length">
          <u-empty mode="list" text="暂无数据" icon="http://cdn.uviewui.com/uview/empty/list.png">
          </u-empty>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    findTaskUnqualified
  } from "@/api/goover.js";
  import {
    pvwImage
  } from "@/utils/util.js";

  export default {
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        options: "",
        dataSource: [],
        imgPrefix: uni.getStorageSync("imgPrefix"),
      };
    },
    onLoad(options) {
      this.options = options;
      this.getDetail();
    },
    methods: {
      pvwImage,
      scrollBottom() {},
      getDetail() {
        findTaskUnqualified({
          taskId: this.options.taskId
        }).then((res) => {
          this.dataSource = res.result.policeCheckCategoryInfoList;
        });
      },
    },
  };
</script>

<style lang="scss">
  .nonGooverDetails {
    flex: 1;
    background: #f6f6f6;
    overflow-y: auto;
    padding: 16rpx 24rpx;

    .wrapper {
      height: 100%;
      background: #ffffff;
      padding: 24rpx 20rpx 0;

      .be-ilegal {
        padding: 13rpx;
        color: #eb0101;
        font-size: 32rpx;
        font-weight: bold;
        text-align: center;
        background: #ffebeb;
      }
    }

    .be-content {
      margin: 0 auto;
      margin-top: 20rpx;
      height: calc(100vh - 84px);
      overflow-y: auto;

      .becontent-item {
        margin-bottom: 20rpx;
        font-size: 26rpx;

        .case-title {
          color: #747070;
          font-weight: 400;
        }

        .title {
          padding: 10rpx 0;
          color: #212020;
          font-size: 30rpx;
          font-weight: bold;
        }

        .basisOf {
          margin-bottom: 12rpx;
          padding: 5rpx 15rpx;
          width: 110rpx;
          color: #fff;
          border-radius: 8rpx;
          background: #b1afaf;

          image {
            vertical-align: revert;
            margin-right: 8rpx;
            width: 21rpx;
            height: 24rpx;
          }
        }

        .clause {
          color: #536598;
        }

        .clause-item {
          padding-top: 10rpx;
          color: #666666;
          font-weight: 500;
          line-height: 35rpx;

          view {
            display: inline;
          }
        }

        .scene-forensics {
          margin-top: 16rpx;
          padding: 15rpx;
          background: #f9f9f9;

          .forensics-title {
            display: flex;
            justify-content: space-between;
            font-size: 26rpx;
            font-weight: bold;

            .time {
              color: #bbbbbb;
              font-weight: 400;
            }
          }

          .picture {
            display: flex;
            flex-wrap: wrap; // zry
            margin-top: 15rpx;

            image {
              display: block;
              margin-right: 9rpx;
              width: 200rpx;
              height: 140rpx;
            }

            image:nth-child(3n) {
              margin-right: 0;
            }
          }

          .explain {
            padding-top: 15rpx;
            color: #212020;
            font-weight: 400;
            line-height: 35rpx;
          }
        }
      }
    }
  }
</style>